<template>
  <q-dialog class="add-edit-station-dialog dialog" v-model="show" persistent>
    <q-card v-drag style="min-width: 800px;min-height: 675px">
      <!-- dialog title -->
      <q-card-section class="dialog-title bg-primary">
        <div class="text-center text-white">{{title}}</div>
        <q-btn
          style="font-size: 18px;color: white"
          flat round dense
          class="iconfont icontubiao-67 close-btn dialog"
          @click="hideDialog"
        >
        </q-btn>
      </q-card-section>
      <!-- loading 新建网关时候显示 -->
      <Loading v-if="initLoading && !isNewCnc"/>

      <!-- 步骤指示条 -->
      <Steps v-if="!step" :controllerType="controllerType" :value="currentStep" v-show="!initLoading" style="margin-top: 20px"/>

      <!-- 新建网关 -->
      <NewGateway v-show="currentStep === 1 && !initLoading"
                  @successSubmit="successNewGateWay"
                  :products="products"
                  @loading="newLoading"
                  @cncType="changeCncType"
                  @products="getProducts"
                  @failedSubmit="initLoading=false"
                  @hideDialog="hideDialog"/>

      <!-- 新cnc架构 -->
      <!-- 网关配置 -->
      <DriverConfig v-if="isNewCnc && currentStep===2"
                    :driver-params="driverParams"
                    :isCompete="isCompete"
                    :products="productsOld"
                    :select-driver-info="selectDriverInfo"
                    @successSubmit="successDriverConfig"
                    @hideDialog="hideDialog"
      />

      <!-- 绑定设备 -->
      <SubDeviceConfig v-if="isNewCnc && currentStep===3"
                       :driver-params="driverParams"
                       :driver-config-data="driverConfigData"
                       @hideDialog="hideDialog"
                       :sub-dev-config-data="subDevConfigData"
                       :isCompete="isCompete"
                       @bindNone="currentStep=4"
                       @successSubmit="successSubDeviceConfig"
      />

      <!-- 配置设备 -->
      <ConfigGateway v-if="isNewCnc && currentStep === 4"
                     :driver-params="driverParams"
                     :moduleType="1"
                     :lanInfo="lanInfo"
                     :isCompete="isCompete"
                     :mobileConf="mobileConf"
                     @successSubmit="successConfigGateway"
                     @hideDialog="hideDialog"
                     @bindNone="successConfigGateway"
      />

      <!-- 老cnc架构 -->
      <!-- 网关配置 -->
      <ConfigGatewayOld v-if="!isNewCnc && currentStep === 2" @preStep="preStep" @successSubmit="currentStep=3" :detailInfo="detailInfo" :box-id="boxId" :wanType="detailInfo.wanType"/>

      <!-- 绑定设备 -->
      <BindingEquipment v-if="!isNewCnc && currentStep === 3" :controllerType="controllerType" @preStep="preStep" @successSubmit="currentStep=4" @bindNone="hideDialog" :detailInfo="detailInfo" :box-id="boxId" :productName="detailInfo.productName" :products="productsOld"/>

      <!-- 配置设备 -->
      <ConfigEquipment v-if="!isNewCnc && currentStep === 4" @preStep="preStep" @successSubmit="successConfigEquipment" :detailInfo="detailInfo" :box-id="boxId"/>
    </q-card>
  </q-dialog>
</template>

<script>
import Steps from './steps'
import NewGateway from './new-gateway'
import { deleteBox, getBoxInfo, getWan } from '../../../../../boot/miot/list'
import DriverConfig from './driver-config'
import SubDeviceConfig from './sub-device-config'
import ConfigGateway from '../plc-dialog/config-gateway'
import Loading from './loading'
import ConfigGatewayOld from './config-gateway'
import BindingEquipment from './binding-equipment'
import ConfigEquipment from './config-equipment'

export default {
  name: 'gateway-dialog',
  components: {
    ConfigGateway,
    SubDeviceConfig,
    Steps,
    NewGateway,
    DriverConfig,
    Loading,
    ConfigGatewayOld,
    BindingEquipment,
    ConfigEquipment
  },
  props: {
    controllerType: {
      type: String,
      default: ''
    },
    step: {
      type: Number,
      default: 0
    },
    lanInfo: {
      type: Object,
      default: () => {}
    },
    detailDriverParams: {
      type: Object,
      default: () => {}
    },
    selectDriverInfo: {
      type: Object,
      default: () => {}
    },
    deviceIds: {
      type: Array,
      default: () => []
    },
    subDevConfigData: {
      type: Object,
      default: () => {}
    },
    products: {
      type: Array,
      default: () => []
    },
    productsCnc: {
      type: Array,
      default: () => []
    },
    mobileConf: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      show: false, // 弹框的显示与隐藏
      currentStep: 1,
      initLoading: false,
      boxId: '',
      isNewCnc: true,
      productsOld: [],
      driverParams: {},
      driverConfigData: {},
      detailInfo: {
        wanType: '',
        productSN: '',
        productName: '',
        deviceSN: '',
        hwVersion: '',
        swVersion: '',
        software: '',
        hardware: '',
        lineStatus: '',
        pd: ''
      }
    }
  },
  computed: {
    isCompete () {
      return this.step === 2 || this.step === 4
    },
    title () {
      const titleObj = {
        '1': '新建网关',
        '2': '驱动配置',
        '3': '子设备配置',
        '4': '网关配置'
      }
      return titleObj[this.currentStep] || '部署'
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.initData()
      } else {
        this.$emit('close')
      }
    },
    step (val) {
      if (val) {
        this.currentStep = val
      }
    },
    boxId: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.getBoxWan(val)
          this.getBoxInfo(val)
        }
      }
    },
    productsCnc: {
      immediate: true,
      deep: true,
      handler: function (val) {
        this.productsOld = val
      }
    },
    detailDriverParams: {
      deep: true,
      immediate: true,
      handler (val) {
        if (val) {
          this.driverParams.ucloudBoxNum = val?.ucloudBoxNum ? val.ucloudBoxNum : ''
          this.driverParams.gatewayId = val?.gatewayId ? val.gatewayId : ''
          this.driverParams.productId = val?.productId ? val.productId : ''
          this.driverParams.productName = val?.productName ? val.productName : ''
          this.driverParams.gatewaySN = val?.gatewaySN ? val.gatewaySN : ''
          this.driverParams.subDeviceId = val?.subDeviceId ? val.subDeviceId : ''
          this.driverParams.boxNum = val?.boxNum ? val.boxNum : ''
          this.driverConfigData.driverName = val?.driverName ? val.driverName : ''
        }
      }
    }
  },
  methods: {

    initData () {
      if (this.step) {
        this.currentStep = this.step
      } else {
        this.currentStep = 1
      }
    },

    // 显示弹框
    showDialog () {
      this.show = true
    },

    // 隐藏弹框
    hideDialog () {
      this.initLoading = false
      this.show = false
      this.$emit('successAll')
    },

    /**
     * 执行删除操作
     */
    async deleteDataConfirm (boxId) {
      if (!boxId) return
      const data = await deleteBox(boxId)
      if (data.success) {
        this.$emit('deleteSuccess')
      } else {
        this.$message.error('删除失败')
      }
    },
    // 新建网关loading
    newLoading (value) {
      this.initLoading = !!value
    },

    // 新建网关提交成功
    successNewGateWay (data) {
      this.currentStep = 2
      if (this.isNewCnc) {
        this.driverParams = data
      } else {
        this.initLoading = false
        this.productName = data.productName
        this.boxId = data.boxId
      }
    },

    // 网关配置提交成功
    successDriverConfig (data) {
      this.currentStep = 3
      this.driverConfigData = data
      const selectDriverInfo = {
        driver: data.driver,
        version: data.version,
        driverIp: data.driverIp,
        driverPort: data.driverPort,
        driverName: data.driverName
      }
      this.$emit('selectDriverInfo', selectDriverInfo)
      this.$emit('driverSuccess')
    },

    // 绑定设备提交成功
    successSubDeviceConfig () {
      if (this.isCompete) {
        this.$emit('successAll')
        this.show = false
        return
      }
      this.currentStep = 4
    },
    // 网关配置完成
    successConfigGateway () {
      this.$message.success('配置完成')
      this.$emit('successAll')
      this.show = false
    },

    // 上一步
    preStep () {
      this.currentStep--
    },

    changeCncType (val) {
      this.isNewCnc = val
    },
    getProducts (val) {
      this.productsOld = val
    },
    async getBoxWan (boxId) {
      const { data } = await getWan(boxId)
      if (data) {
        this.detailInfo.wanType = data.wan
      }
    },

    async getBoxInfo (boxId) {
      const { data } = await getBoxInfo(boxId)
      if (data) {
        this.detailInfo.productSN = data.productSN ? data.productSN : '--'
        this.detailInfo.productName = data.productName ? data.productName : '--'
        this.detailInfo.deviceSN = data.deviceSN ? data.deviceSN : '--'
        this.detailInfo.hwVersion = data.hwVersion ? data.hwVersion : '--'
        this.detailInfo.swVersion = data.swVersion ? data.swVersion : '--'
        this.detailInfo.software = data.software ? data.software : '--'
        this.detailInfo.hardware = data.hardware ? data.hardware : '--'
        this.detailInfo.lineStatus = data.lineStatus ? data.lineStatus : '--'
        this.detailInfo.pd = data.pd ? data.pd : '--'
        this.boxHardWare = data.hardware ? data.hardware : this.boxHardWare
      }
    },
    // 设备配置提交成功
    successConfigEquipment () {
      this.$emit('successAll')
      this.hideDialog()
    }
  }
}
</script>

<style scoped lang="stylus">
</style>
